<template>
  <div class="loginBox">
    <div class="textBox">
      <span id="title">透景数据管理</span><br />
      <span id="describe">请输入您的账号和密码以进入数据管理系统</span>
    </div>
    <div class="password">
      <inputs>
        <span
          class="lb"
          slot="label"
        >账号</span>
        <el-input
          slot="frame"
          placeholder="请输入您的账号"
          v-model="users"
          label="pw"
          type="text"
        >
        </el-input>
      </inputs>
      <inputs>
        <span
          class="lb"
          slot="label"
        >密码</span>
        <el-input
          slot="frame"
          placeholder="请输入您的密码"
          v-model="passwords"
          label="act"
          type="password"
          show-password
          maxlength=18
          minlength=6
          @keyup.native.enter="loging(users)"
        >
        </el-input>
      </inputs>
      <buttons>
        <el-button
          @click.stop="loging(users)"
          slot="buttons"
          type="primary"
          size="medium"
          :loading="loadingIcon"
        >立 即 登 录</el-button>
      </buttons>
    </div>
    <div class="logoBox">
      <img
        src="@/assets/logo/tellgen-logo.png"
        alt=""
      >
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { loginPort } from "@/request/api.js"; //导入登录请求接口api
import md5 from "js-md5";
import inputs from "@/components/baseCpn/inputs.vue";
import buttons from "@/components/baseCpn/buttons.vue";
export default {
  components: {
    inputs,
    buttons
  },
  data() {
    return {
      pwContent: "",
      account: "",
      pw: "密码",
      act: "账号",
      users: "",
      passwords: "",
      loadingIcon: false
    };
  },
  methods: {
    loging(users) {
      if (this.users === "" || this.passwords === "") {
        this.$message.error({
          message: "输入框内容不能为空！"
        });
      } else {
        // axios发送登录请求
        loginPort({
          userName: this.users,
          pwd: md5(this.users + this.passwords)
        })
          .then(res => {
            if (res.data.success) {
              if (res.data.rows[0].isFirst == "0") {
                this.$message.success({
                  message: "恭喜，登录成功！",
                  duration: 6000
                });
                // this.$router.push("/tellgen");
                this.$router.push("/tellgen/maintain");
              } else {
                this.$message.success({
                  message: "恭喜，登录成功！请修改初始化密码",
                  duration: 6000
                });
                this.$router.push({ path: `/changepassword/${users}` });
              }
            } else {
              this.$message.error({
                message: "登录失败了,请重新登录!",
                duration: 6000
              });
            }
          })
          .catch(err => {
            console.log("登录请求失败:", err);
          });
      }
    },
  }
};
</script>

<style lang="less">
.loginBox {
  width: 45rem;
  height: 53.6rem;
  background-color: rgba(255, 255, 255, 0.66);
  position: absolute;
  top: 26rem;
  left: 15.2rem;
  border-bottom-left-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;
  border-top: 0.6rem solid #ea6b48;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  text-align: center;
  .textBox {
    width: 100%;
    height: 16rem;
    color: #333333;
    text-align: center;
    padding-top: 5rem;
    box-sizing: border-box;
    #title {
      font-size: 2.4rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }
    #describe {
      font-size: 1.2rem;
      line-height: 3.6rem;
    }
  }
  .password {
    width: 100%;
    height: 26.6rem;
  }
}
.logoBox {
  width: 100%;
  height: 7rem;
}
</style>
<style>
.el-message--error {
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
}
.el-message--success {
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
}
</style>